$(function () {
  // 设置默认的第几页面，还有一个页面显示多少条信息
  let page = 1;
  let perpage = 10;

  // 设置默认的筛选条件
  let type = '';
  let state = '';

  // 在这里可以开始加载页面数据
  postInit();
  cateInit();

  // 获取后台的文章列表数据
  function postInit() {
    $.ajax({
      url: window.BigNew.article_query,
      data: {
        page, perpage, type, state
      },
      success(response) {
        let htmlStr = template('articleTemp', response.data);
        // 获取完文章列表以后,
        // 应该将当前的数据中供多少页的数字作为参数
        // 用来渲染分页组件
        setPage(response.data.totalPage, page);
        $('tbody').html(htmlStr);
      }
    });
  }

  // 获取文章类别数据
  function cateInit() {
    $.ajax({
      url: window.BigNew.category_list,
      success: function (response) {
        let htmlStr = template('cateTemp', response);
        $("#selCategory").html(htmlStr);
      }
    });
  }

  // 尝试使用分页组件
  function setPage(totalPages, currentPage) {
    $('.pagination').bootstrapPaginator({
      bootstrapMajorVersion: 3,
      currentPage,
      totalPages,
      onPageClicked(event, originEvent, type, newPage) {
        // 这是翻页组件被点击时触发的回调
        // 里面可以接受四个参数, 其中最重要是第四个
        // console.log('被点击了' + newPage);
        page = newPage;
        postInit();
      }
    });
  }

  // 监听筛选事件
  $("#btnSearch").on('click', function () {
    type = $('#selCategory').val();
    state = $('#selStatus').val();
    page = 1;
    postInit();
  });

  // 删除按钮的监听事件
  // 因为删除按键是动态渲染出来的，所以要用事件委托来监听事件 
  $('tbody').on('click', '#btn-del', function () {
    $.ajax({
      type: "post",
      url: window.BigNew.article_delete,
      data: { id: $("#btn-del").data('id') },
      success(response) {
        if (response.code == 204) {
          postInit();
        }
      }
    });
  });
})